<template>
  <!--  <div style="height: 100%">-->
  <!--      <div style="position:absolute;margin-top: 80px;margin-left: 80%;font-weight: bolder">-->
  <!--       切换 <el-switch-->
  <!--          v-model="loginCss"-->
  <!--          inactive-color="#13ce66"-->
  <!--          active-color="#ff4949"-->
  <!--          active-value="1"-->
  <!--          inactive-value="0"-->
  <!--          @change="schange($event)"-->
  <!--         >-->
  <!--        </el-switch>-->
  <!--      </div>-->
  <!--    <div class="login"  v-if="loginCss==1">-->
  <!--      <el-image style="width: 150px;height: 50px;left: 180px;top: 60px" :src="require('../assets/images/login/logo.png')"></el-image>-->
  <!--      <el-container style="margin: auto;height: 60%;width: 60%;max-width: 1000px;max-height: 800px"  >-->
  <!--        <el-aside style="width: 60%;height: 100%; " id="pic">-->
  <!--          <div style="height: 140px;width: 100%;color: white;font-size: 30px;font-weight: bolder;text-align: center;line-height: 80px;margin-top: 80px">山东民祥化工科技有限公司</br>大数据平台</div>-->
  <!--          <h1 style="width: 100%;text-align: center;color: white">与时俱进 与市俱进 与世俱进</h1>-->
  <!--          <h1 style="width: 100%;text-align: center;color: white">三红线 两保障</h1>-->
  <!--          <h1 style="width: 100%;text-align: center;color: white">安全环保 数字化建设 质量与售后服务</h1>-->
  <!--          <h1 style="width: 100%;text-align: center;color: white">团队与人才建设</h1>-->
  <!--          <h1 style="width: 100%;text-align: center;color: white">技能改造与节能降耗</h1>-->
  <!--        </el-aside>-->
  <!--        <el-main  class="login-form">-->
  <!--          <el-image style="width: 50px;height: 50px; left: 48%" :src="require('../assets/images/login/logo1.jpg')"></el-image>-->
  <!--          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">-->
  <!--            <el-form-item prop="userName" >-->
  <!--              <el-input v-model="loginForm.userName" type="text" auto-complete="off" placeholder="账号" @keyup.enter.native="handleLogin">-->
  <!--                <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />-->
  <!--              </el-input>-->
  <!--            </el-form-item>-->
  <!--            <el-form-item prop="password">-->
  <!--              <el-input-->
  <!--                v-model="loginForm.password"-->
  <!--                type="password"-->
  <!--                auto-complete="off"-->
  <!--                placeholder="密码"-->
  <!--                @keyup.enter.native="handleLogin"-->
  <!--              >-->
  <!--                <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />-->
  <!--              </el-input>-->
  <!--            </el-form-item>-->

  <!--            <el-row>-->
  <!--              <el-col :span="12">-->
  <!--                <el-form-item prop="code" >-->
  <!--                  <el-input v-model="loginForm.code" type="text" auto-complete="off" placeholder="验证码" maxlength="4" @keyup.enter.native="handleLogin">-->
  <!--                    <svg-icon slot="prefix" icon-class="code" class="el-input__icon input-icon" />-->
  <!--                  </el-input>-->
  <!--                </el-form-item>-->
  <!--              </el-col>-->
  <!--              <el-col :span="12">-->
  <!--                <el-form-item >-->
  <!--                  <img :src="codeUrl" class="captcha" @click="getCode">-->
  <!--                </el-form-item>-->
  <!--              </el-col>-->
  <!--            </el-row>-->
  <!--            <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>-->
  <!--            <el-form-item style="width:100%;">-->
  <!--              <el-button-->
  <!--                :loading="loading"-->
  <!--                size="medium"-->
  <!--                type="primary"-->
  <!--                style="width:100%;"-->
  <!--                @click.native.prevent="handleLogin"-->
  <!--              >-->
  <!--                <span v-if="!loading">登 录</span>-->
  <!--                <span v-else>登 录 中...</span>-->
  <!--              </el-button>-->
  <!--            </el-form-item>-->
  <!--          </el-form>-->
  <!--        </el-main>-->

  <!--      </el-container>-->


  <!--    </div>-->
  <!--    <div class="login1"  v-else>-->
  <!--&lt;!&ndash;      <el-image style="width: 150px;height: 50px;left: 180px;top: 60px;" :src="require('../assets/images/login/logo.png')"></el-image>&ndash;&gt;-->
  <!--      <el-container style="margin: auto;height: 60%;width: 60%;max-width: 1000px;max-height: 800px"  >-->
  <!--        <el-aside style="width: 60%;height: 100%;background-color: transparent; " >-->
  <!--&lt;!&ndash;          <div style="height: 140px;width: 100%;color:white;font-size: 30px;font-weight: bolder;text-align: center;line-height: 80px;margin-top: 80px">山东民祥化工科技有限公司</br>大数据平台</div>&ndash;&gt;-->
  <!--&lt;!&ndash;          <h1 style="width: 100%;text-align: center;color:white;">与时俱进 与市俱进 与世俱进</h1>&ndash;&gt;-->
  <!--&lt;!&ndash;          <h1 style="width: 100%;text-align: center;color:white;">三红线 两保障</h1>&ndash;&gt;-->
  <!--&lt;!&ndash;          <h1 style="width: 100%;text-align: center;color:white;">安全环保 数字化建设 质量与售后服务</h1>&ndash;&gt;-->
  <!--&lt;!&ndash;          <h1 style="width: 100%;text-align: center;color:white;">团队与人才建设</h1>&ndash;&gt;-->
  <!--&lt;!&ndash;          <h1 style="width: 100%;text-align: center;color:white;">技能改造与节能降耗</h1>&ndash;&gt;-->
  <!--        </el-aside>-->
  <!--        <el-main  class="login-form" style="background-color: transparent;width: 300px;border: 1px solid #647421;">-->
  <!--          <el-image style="width: 160px;height: 50px; left: 30%" :src="require('../assets/images/login/logo.png')"></el-image>-->
  <!--          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" style="background-color: transparent;">-->
  <!--            <el-form-item prop="userName" >-->
  <!--              <el-input v-model="loginForm.userName"  type="text" auto-complete="off" placeholder="账号" @keyup.enter.native="handleLogin">-->
  <!--                <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />-->
  <!--              </el-input>-->
  <!--            </el-form-item>-->
  <!--            <el-form-item prop="password">-->
  <!--              <el-input-->
  <!--                v-model="loginForm.password"-->
  <!--                type="password"-->
  <!--                auto-complete="off"-->
  <!--                placeholder="密码"-->
  <!--                @keyup.enter.native="handleLogin"-->
  <!--              >-->
  <!--                <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />-->
  <!--              </el-input>-->
  <!--            </el-form-item>-->

  <!--            <el-row>-->
  <!--              <el-col :span="12">-->
  <!--                <el-form-item prop="code" >-->
  <!--                  <el-input v-model="loginForm.code" type="text" auto-complete="off" placeholder="验证码" maxlength="4" @keyup.enter.native="handleLogin">-->
  <!--                    <svg-icon slot="prefix" icon-class="code" class="el-input__icon input-icon" />-->
  <!--                  </el-input>-->
  <!--                </el-form-item>-->
  <!--              </el-col>-->
  <!--              <el-col :span="12">-->
  <!--                <el-form-item >-->
  <!--                  <img :src="codeUrl" class="captcha" @click="getCode">-->
  <!--                </el-form-item>-->
  <!--              </el-col>-->
  <!--            </el-row>-->
  <!--            <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;color: white">记住密码</el-checkbox>-->
  <!--            <el-form-item style="width:100%;">-->
  <!--              <el-button-->
  <!--                :loading="loading"-->
  <!--                size="medium"-->
  <!--                type="primary"-->
  <!--                style="width:100%;"-->
  <!--                @click.native.prevent="handleLogin"-->
  <!--              >-->
  <!--                <span v-if="!loading">登 录</span>-->
  <!--                <span v-else>登 录 中...</span>-->
  <!--              </el-button>-->
  <!--            </el-form-item>-->
  <!--          </el-form>-->
  <!--        </el-main>-->

  <!--      </el-container>-->


  <!--    </div>-->
  <!--  </div>-->
  <el-container style="width: 100%;height: 100%" v-loading="loading" element-loading-text="正在自动登录请稍后"  >

  </el-container>
</template>

<script>
  import { getCodeImg } from "@/api/login";
  import Cookies from "js-cookie";
  import { encrypt, decrypt } from '@/utils/jsencrypt'

  export default {
    name: "Login",
    data() {
      return {
        loading:true,
        codeUrl: require('../assets/images/captcha.jpg'),
        cookiePassword: "",
        loginCss:localStorage.getItem("loginCss")==null?2:localStorage.getItem("loginCss"),
        loginForm: {
          userName: "",
          password: "",
          rememberMe: false,
          code: "",
          time: "",
          realKey: ""
        },
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        loginShow:true,
        loginRules: {
          userName: [
            { required: true, trigger: "blur", message: "用户名不能为空" }
          ],
          password: [
            { required: true, trigger: "blur", message: "密码不能为空" }
          ],
          code: [
            { required: true, trigger: "blur", message: "验证码不能为空", min: 4 }
          ]
        },
        // loading: false,
        redirect: undefined
      };
    },
    watch: {
      $route: {
        handler: function(route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true
      }
    },
    created() {
      this.handleLogin();
      // this.getCode();
      // this.getCookie();
    },
    methods: {
      getCode() {
        getCodeImg().then(res => {
          this.codeUrl = "data:image/jpg;base64," + res.data.img;
          this.loginForm.realKey=res.data.realKey;
        });
      },
      getCookie() {
        const userName = Cookies.get("userName");
        const password = Cookies.get("password");
        const rememberMe = Cookies.get('rememberMe')
        this.loginForm = {
          userName: userName === undefined ? this.loginForm.userName : userName,
          password: password === undefined ? this.loginForm.password : decrypt(password),
          rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
          code: this.loginForm.code,
          realKey: this.loginForm.realKey
        };
      },
      schange(val){
        localStorage.setItem('loginCss', val);
      },
      handleLogin() {
        // this.$refs.loginForm.validate(valid => {
        //   if (valid) {
        this.loading = true;
        // if (this.loginForm.rememberMe) {
        //   Cookies.set("userName", this.loginForm.userName, { expires: 30 });
        //   Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
        //   Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
        // } else {
        //   Cookies.remove("userName");
        //   Cookies.remove("password");
        //   Cookies.remove('rememberMe');
        // }
        this.loginForm.userName=this.$route.query.logintoken;
        this.$store
          .dispatch("Login", this.loginForm)
          .then(() => {
            this.$router.push({ path: "/birRepport/index?biName=BI报表首页"  || "/birRepport/index?biName=BI报表首页" });
          })
          .catch(() => {
            this.loading = false;
            this.loginForm.code="";
            this.loginForm.realKey="";
            this.getCode();
          });
        //   }
        // });
      }
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss">
  .login {
    display: flex;
    height: 100%;
    background-image: url("../assets/images/login/login_back.png");
    background-size: cover;
  }
  .login1 {
    display: flex;
    height: 100%;
    background-image: url("../assets/images/login_back.jpg");
    background-size: cover;
  }
  #pic{
    background-image: url("../assets/images/login/log1.png");
    background-size: cover;
  }

  .el-login-header {
    height: 40px;
    line-height: 40px;
    position: fixed;
    top: 10px;
    width: 50%;
    text-align: left;
    color: #1890ff;
    font-family: Arial;
    font-weight: bold;
    font-size: 24px;
    letter-spacing: 1px;
  }

  .title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;

  }

  .login-form {
    border-radius: 6px;
    background: #ffffff;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding: 25px 25px 5px 25px;

    .el-input {
      height: 38px;
      input {
        height: 38px;
      }
    }
    .input-icon {
      height: 39px;
      width: 14px;
      margin-left: 2px;
    }
  }
  .login-tip {
    font-size: 14px;
    text-align: center;
    color: #bfbfbf;
  }
  .login-code {
    width: 33%;
    height: 38px;
    float: right;
    img {
      cursor: pointer;
      vertical-align: middle;
    }
  }
  .el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 10px;
    width: 100%;
    text-align: center;
    color: #707070;
    font-family: Arial;
    font-size: 16px;
    letter-spacing: 1px;
  }
  .captcha{
    margin-left: 20px;
  }
</style>
